<template>
  <el-breadcrumb separator="/" class="mb-15" :class="{ 'mx-15': useLocale.isMob }" style="vertical-align: bottom">
    <el-breadcrumb-item>
      <div class="flex align-center">
        <el-icon :size="18"><Setting /></el-icon>
        <span class="pl">设定</span>
      </div>
    </el-breadcrumb-item>
    <el-breadcrumb-item>电商设定</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="mob-ec-box-card" v-if="useLocale.isMob">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      class="m-15"
      status-icon
      label-width="auto"
      label-position="top"
    >
      <el-form-item label="购物车-有效期天数" prop="cart_validity">
          <el-input v-model="ruleForm.cart_validity" />
        </el-form-item>
        <el-form-item label="购物车-到期自动删除" prop="cart_auto_delete">
          <el-switch v-model="ruleForm.cart_auto_delete" />
        </el-form-item>
        <el-form-item label="购物车-查询关键词设定" prop="cart_keyword">
          <div class="flex flex-wrap">
            <el-tag
              class="mr-1 mt mb"
              size="large"
              v-for="tag in ruleForm.cart_keyword"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>

            <el-input
              v-if="inputVisible"
              ref="InputRef"
              v-model="inputValue"
              class="w-20"
              @keyup.enter="handleInputConfirm"
              @blur="handleInputConfirm"
            />
            <el-button
              v-else
              class="button-new-tag mr-1 mt mb"
              @click="showInput"
            >
              + 设定关键词
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="发送订单通知" prop="is_send_order_notice">
          <el-switch v-model="ruleForm.is_send_order_notice" />
        </el-form-item>
        <el-form-item label="订阅通知-私讯设定" prop="subs_private_msg">
          <el-input v-model="ruleForm.subs_private_msg" autosize type="textarea" />
        </el-form-item>
        <el-form-item label="订阅通知-留言设定" prop="subs_leave_msg">
          <el-input v-model="ruleForm.subs_leave_msg" autosize type="textarea" />
        </el-form-item>
        <el-form-item label="结单通知" prop="check_order_msg">
          <el-input v-model="ruleForm.check_order_msg" autosize type="textarea" />
        </el-form-item>
        <el-form-item label="直播库存不足记录" prop="is_open_no_stock">
          <div class="flex flex-column">
            <el-switch v-model="ruleForm.is_open_no_stock" />
            <div class="text-tips-color font-sm">
              默认关闭，开启后，会记录直播留言因库存不足未得标的信息
            </div>
          </div>
        </el-form-item>
        <el-form-item label="购物须知设定" prop="shopping_notes">
          <my-editor
            :text="ruleForm.shopping_notes"
            @change="getEditorValue"
          ></my-editor>
        </el-form-item>
      <el-form-item label-width="auto" style="margin-bottom: 0">
        <el-button size="large" type="primary" @click="submitForm()">
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-card v-else class="box-card" shadow="hover">
    <el-scrollbar class="scroll">
      <el-form
        ref="ruleFormRef"
        style="max-width: 90%"
        :model="ruleForm"
        :rules="rules"
        label-width="200"
        class="form mt-1"
        status-icon
      >
        <el-form-item label="购物车-有效期天数" prop="cart_validity">
          <el-input v-model="ruleForm.cart_validity" />
        </el-form-item>
        <el-form-item label="购物车-到期自动删除" prop="cart_auto_delete">
          <el-switch v-model="ruleForm.cart_auto_delete" />
        </el-form-item>
        <el-form-item label="购物车-查询关键词设定" prop="cart_keyword">
          <div class="flex flex-wrap">
            <el-tag
              class="mr-1 mt mb"
              size="large"
              v-for="tag in ruleForm.cart_keyword"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>

            <el-input
              v-if="inputVisible"
              ref="InputRef"
              v-model="inputValue"
              class="w-20"
              @keyup.enter="handleInputConfirm"
              @blur="handleInputConfirm"
            />
            <el-button
              v-else
              class="button-new-tag mr-1 mt mb"
              @click="showInput"
            >
              + 设定关键词
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="发送订单通知" prop="is_send_order_notice">
          <el-switch v-model="ruleForm.is_send_order_notice" />
        </el-form-item>
        <el-form-item label="订阅通知-私讯设定" prop="subs_private_msg">
          <el-input v-model="ruleForm.subs_private_msg" autosize type="textarea" />
        </el-form-item>
        <el-form-item label="订阅通知-留言设定" prop="subs_leave_msg">
          <el-input v-model="ruleForm.subs_leave_msg" autosize type="textarea" />
        </el-form-item>
        <el-form-item label="结单通知" prop="check_order_msg">
          <el-input v-model="ruleForm.check_order_msg" autosize type="textarea" />
        </el-form-item>
        <el-form-item label="直播库存不足记录" prop="is_open_no_stock">
          <div class="flex flex-column">
            <el-switch v-model="ruleForm.is_open_no_stock" />
            <div class="text-tips-color font-sm">
              默认关闭，开启后，会记录直播留言因库存不足未得标的信息
            </div>
          </div>
        </el-form-item>
        <el-form-item label="购物须知设定" prop="shopping_notes">
          <my-editor
            :text="ruleForm.shopping_notes"
            @change="getEditorValue"
          ></my-editor>
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <el-form-item label-width="200" style="margin-bottom: 0">
        <el-button size="large" type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
      </el-form-item>
    </template>
  </el-card>
</template>
<script lang="ts" setup>
import {
  reactive,
  ref,
  onMounted,
  nextTick,
  inject
} from "vue";
import { $getEmall, $postEmall } from "@api/setting";
import { Search, Setting, Plus } from "@element-plus/icons-vue";
import { useLocaleStore } from "@/store/locales";
import { useCommonStore } from "@/store/common";
const useLocale = useLocaleStore();
const useCommon = useCommonStore();
const reload = inject('reload')
const filter = ref({
  currency: [],
  area: [],
  fbpage: [],
});
onMounted(() => {
  getInfo();
});

const ruleFormRef = ref();
const ruleForm = reactive({
  cart_validity: "", //购物车有效期天数
  cart_auto_delete: false,
  cart_keyword: [], //购物车关键字
  is_send_order_notice: false,
  subs_private_msg: "", //订阅私讯
  subs_leave_msg: "", //订阅留言
  check_order_msg: "", //结单通知
  is_open_no_stock: false, //直播库存不足
  shopping_notes: "", //购物车设定html
});

const rules = reactive({
  currency: [
    {
      required: true,
      message: "Please select currencye",
      trigger: "change",
    },
  ],
  area: [
    {
      required: true,
      message: "Please select currencye",
      trigger: "change",
    },
  ],
  fbpage: [
    {
      required: true,
      message: "Please select fbpage",
      trigger: "change",
    },
  ],
});

const getInfo = async () => {
  const res = await $getEmall();
  if (JSON.stringify(res.data) != "{}") {
    Object.keys(ruleForm).forEach((key) => {
      if (
        key == "cart_auto_delete" ||
        key == "is_send_order_notice" ||
        key == "is_open_no_stock"
      ) {
        res.data[key] = Boolean(Number(res.data[key]));
      }
      ruleForm[key] = res.data[key];
    });
  }
  console.log(ruleForm);
};
const submitForm = async () => {
  const res = await $postEmall(ruleForm);
  if (res.code == 0) {
    ElMessageBox.alert("保存成功", "提示", {
      confirmButtonText: "OK",
      type: "success",
      "show-close": false,
      callback: (action) => {
         reload()
      },
    });
  } else {
    ElMessageBox.alert(res.msg, "提示", {
      confirmButtonText: "OK",
      type: "error",
      "show-close": false,
    });
  }
  console.log(res);
};

const inputValue = ref("");
const inputVisible = ref(false);
const InputRef = ref();

const handleClose = (tag: string) => {
  ruleForm.cart_keyword.splice(ruleForm.cart_keyword.indexOf(tag), 1);
};

const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    InputRef.value!.input!.focus();
  });
};

const handleInputConfirm = () => {
  if (inputValue.value) {
    ruleForm.cart_keyword.push(inputValue.value);
  }
  inputVisible.value = false;
  inputValue.value = "";
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const getEditorValue = (e: any): void => {
  console.log(e);
  ruleForm.shopping_notes = e;
};
</script>

<style lang="scss" scoped>

.scroll {
  height: calc(100vh - 320px);
}
</style>
